<template>
    <div class="processing-static">
        <h3>深加工信息 <el-button type="text" class="setting" @click="Addk">设置</el-button></h3>
        <hr>
        <div class="sub"><span>
                班组: {{ datas?.teamName }}
            </span>
            <span style="margin-left: 30px;">负责人: {{ datas?.userName }}</span>
        </div>


        <!-- 原料 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">原料</div>
                <el-button type="text" class="setting">设置</el-button>
                <el-badge :value="3" class="badge" />
            </div>
            <div class="sub">生产批次：{{ route.query.productuin }}</div>
            <div class="sub-title">相关材料</div>
            <div class="materials-row">
                <div>
                    <el-upload v-model:file-list="qualificationFileList"
                        action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                        :on-remove="handleRemove" @change="handleChange">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
        </div>

        <!-- 辅料 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">辅料</div>
                <el-button type="text" class="setting">设置</el-button>
            </div>
            <div class="sub">生产批次：{{ route.query.productuin }}</div>
            <div class="sub-title">相关材料</div>
            <div class="materials-row">
                <el-upload v-model:file-list="qualificationFileList1"
                    action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                    :on-remove="handleRemove1" @change="handleChange1">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

            </div>

        </div>

        <!-- 添加剂 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">添加剂</div>
                <el-button type="text" class="setting">设置</el-button>
            </div>
            <div class="sub">生产批次：{{ route.query.productuin }}</div>
            <div class="sub-title">相关材料</div>
            <div class="materials-row">
                <el-upload v-model:file-list="qualificationFileList2"
                    action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                    :on-remove="handleRemove2" @change="handleChange2">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>
        </div>

        <!-- 包材 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">包材</div>
                <el-button type="text" class="setting">设置</el-button>
            </div>
            <div class="sub">生产批次：{{ route.query.productuin }}</div>
            <div class="sub-title">相关材料</div>
            <div class="materials-row">
                <el-upload v-model:file-list="qualificationFileList3"
                    action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                    :on-remove="handleRemove3" @change="handleChange3">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>
        </div>

        <!-- 企业信息 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">企业信息</div>
                <el-button type="text" class="setting" @click="Addp">设置</el-button>
                <el-badge :value="5" class="badge" />
            </div>
            <div class="company-row">
                <div>公司名称: {{ datass?.firmName }}</div>
                <div>生产许可证号: {{ datass?.productuinIcode }}</div>
            </div>
        </div>

        <!-- 企业照片 -->
        <div class="block">
            <div class="block-header">
                <div class="dot"></div>
                <div class="name">企业照片</div>
            </div>
            <div class="photos">
                <el-upload v-model:file-list="qualificationFileList4"
                    action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                    :on-remove="handleRemove4" @change="handleChange4">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>
        </div>
    </div>


    <el-dialog v-model="dialogFormVisible" title="企业信息新增" width="500">
        <el-form :model="form">
            <el-form-item label="班组">
                <el-input v-model="form.teamName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="form.userName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="CreateOver(1)">
                    新增
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisibles" title="企业信息新增" width="500">
        <el-form :model="Proodata">
            <el-form-item label="公司名称">
                <el-input v-model="Proodata.firmName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="生产许可证号">
                <el-input v-model="Proodata.productuinIcode" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="CreateOver(2)">
                    新增
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup lang="ts">
import { ElBadge, ElButton, ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue';
import { Traceab } from '@/Http/http'
import { useRoute } from 'vue-router';
import { Plus } from '@element-plus/icons-vue'
import { type UploadProps, type UploadUserFile } from 'element-plus'
const route = useRoute();
const dialogFormVisible = ref(false)
const form = ref<any>({
    "overId": 0,
    "teamName": "",
    "userName": "",
    "productuins": ""
})

const Addk = () => {
    dialogFormVisible.value = true
}

const CreateOver = (mid: any) => {
    if (mid == 1) {
        form.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/OverCreate", { data: form.value }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("新增成功");
                dialogFormVisible.value = false
                GetOver();
            }
            else {
                ElMessage.error("新增失败")
            }
        })
    }
    else {
        Proodata.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ProceCreate", { data: Proodata.value }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("新增成功");
                dialogFormVisible.value = false
                GetOvers();
            }
            else {
                ElMessage.error("新增失败")
            }
        })
    }

}
const datas = ref<any>({})
const GetOver = () => {
    Traceab.get("/api/Shops/OverTimeQuery", {
        params: {
            Productuins: route.query.productuin
        }
    }).then(res => {
        datas.value = res.data.data;
    })
}
const datass = ref<any>({})
const GetOvers = () => {
    Traceab.get("/api/Shops/ProcssQuery", {
        params: {
            Productuins: route.query.productuin
        }
    }).then(res => {
        datass.value = res.data.data;
    })
}
const dialogFormVisibles = ref(false)
const Addp = () => {
    dialogFormVisibles.value = true
}
const Proodata = ref<any>({
    "processId": 0,
    "firmName": "",
    "productuinIcode": "",
    "productuins": ""
})

const qualificationFileList = ref<UploadUserFile[]>([

])
const handleRemove = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}
const Getimgss = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "原料",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}
const datapsf = ref<any>({
    "imgId": 0,
    "name": "原料",
    "imgUrl": "",
    "productuins": ""
})
const handleChange: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf.value.imgUrl = a.substring(5)
        datapsf.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}
const qualificationFileList1 = ref<UploadUserFile[]>([

])
const handleRemove1 = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}
const Getimgss1 = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "辅料",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList1.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList1.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}
const datapsf1 = ref<any>({
    "imgId": 0,
    "name": "辅料",
    "imgUrl": "",
    "productuins": ""
})
const handleChange1: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf1.value.imgUrl = a.substring(5)
        datapsf1.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf1.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}
const qualificationFileList2 = ref<UploadUserFile[]>([

])
const handleRemove2 = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}
const Getimgss2 = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "添加剂",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList2.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList2.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}
const datapsf2 = ref<any>({
    "imgId": 0,
    "name": "添加剂",
    "imgUrl": "",
    "productuins": ""
})
const handleChange2: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf2.value.imgUrl = a.substring(5)
        datapsf2.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf2.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}
const qualificationFileList3 = ref<UploadUserFile[]>([

])
const handleRemove3 = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}
const Getimgss3 = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "包材",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList3.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList3.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}
const datapsf3 = ref<any>({
    "imgId": 0,
    "name": "包材",
    "imgUrl": "",
    "productuins": ""
})
const handleChange3: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf3.value.imgUrl = a.substring(5)
        datapsf3.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf3.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}
const qualificationFileList4 = ref<UploadUserFile[]>([

])
const handleRemove4 = (file: any, fileList: any) => {
    console.log('删除文件：', file, '当前列表：', fileList)
}
const Getimgss4 = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "企业图片",
            Productuins: route.query.productuin
        }
    }).then(res => {
        console.log(res.data.data.length)
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                qualificationFileList4.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            qualificationFileList4.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}
const datapsf4 = ref<any>({
    "imgId": 0,
    "name": "企业图片",
    "imgUrl": "",
    "productuins": ""
})
const handleChange4: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf4.value.imgUrl = a.substring(5)
        datapsf4.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf4.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}




onMounted(() => {
    GetOver();
    GetOvers();
    Getimgss();
    Getimgss1();
    Getimgss2();
    Getimgss3();
    Getimgss4()
})
</script>

<style scoped>
.processing-static {
    width: 80%;
    font-size: 14px;
    color: #333;
}

.page-title {
    color: #00c48f;
    font-weight: 600;
    margin-bottom: 12px;
}

.block {
    border-bottom: 1px solid #f5f5f5;
    padding: 12px 0 20px;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 3px;
    height: 14px;
    background: #00c48f;
}

.name {
    font-weight: 500;
}

.setting {
    margin-left: 12px;
    color: #409eff;
}

.badge {
    margin-left: 6px;
}

.sub {
    margin: 8px 0 10px 18px;
    color: #666;
}

.sub-title {
    margin-left: 18px;
    margin-bottom: 6px;
}

.materials-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 18px;
}

.thumb {
    position: relative;
    width: 80px;
    height: 60px;
    background: #fafafa;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
}

.thumb.large {
    width: 140px;
    height: 100px;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.close {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    color: #999;
}

.plus {
    width: 24px;
    height: 24px;
    border: 1px dashed #c0c4cc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
}

.actions {
    margin-top: 10px;
    margin-left: 18px;
    display: flex;
    gap: 12px;
}

.company-row {
    margin-left: 18px;
    display: flex;
    justify-content: space-between;
    width: 70%;
    color: #666;
}

.photos {
    margin-left: 18px;
    display: flex;
    align-items: center;
    gap: 24px;
}
</style>